<template>
	<view class="bg min100 plr-52 white pb-100">
		<view class="status_bar">
		</view>
		<!-- <image class="logo" src="../../static/logo.png" mode=""></image> -->
		<view class="">
			<view class="pt-40 size-40" style="color: #3c3c3c">注册</view>
			<view class="mt-20 size-26 color-9">可用手机号直接注册账号</view>
			<view class="radius-46 bg-1 mt-60">
				<u-field v-model="phone" :border-bottom="false" label-width="0" placeholder="请输入手机号码"
					placeholder-style="color:#666;font-size:26rpx;">
				</u-field>
			</view>
			<view class="mt-30 radius-46  mt-30  bg-1">
				<u-field v-model="code" :border-bottom="false" label-width="0" placeholder="验证码"
					placeholder-style="color:#666;font-size:26rpx;">
					<view slot="right" class="getBtn" @click="getcode">
						{{vscode}}
					</view>
				</u-field>
			</view>
			<view class="mt-30 radius-46  mt-30  bg-1">
				<u-field v-model="uuid" :border-bottom="false" :disabled="disabled" label-width="0" placeholder="请输入邀请码"
					placeholder-style="color:#666;font-size:26rpx;">
				</u-field>
			</view>
			<view class="mt-30 radius-46  mt-30  bg-1">
				<u-field v-model="password" :border-bottom="false" label-width="0" placeholder="请设置密码"
					placeholder-style="color:#666;font-size:26rpx;" type="password">
				</u-field>
			</view>
			<view class="mt-30 radius-46  mt-30  bg-1">
				<u-field v-model="password_re" :border-bottom="false" label-width="0" placeholder="再次输入密码"
					placeholder-style="color:#666;font-size:26rpx;" type="password">
				</u-field>
			</view>
			
			<u-button hover-class="none" class="mt-50 mb-30 register-btn" @click="toRegister">注册</u-button>
			<!-- #ifdef H5 -->
			<!-- <button class="downBtn radius-46" hover-class="none" @click="toDown">没有APP,去下载</button> -->
			<!-- #endif -->
			<!-- <u-checkbox-group class="mt-86" active-color="#EFAA1C">
				<u-checkbox v-model="checked" shape="circle">
					点击按钮即表示您同意并愿意遵守<text @click="toUserContent">《用户协议》</text>和<text @click="toPrivacy">《隐私政策》</text>
				</u-checkbox>
			</u-checkbox-group> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled:false,
				checked: false,
				phone: '',
				code: '',
				password_re: '',
				password: "",
				uuid: '',
				vscode: '获取验证码',
				countNum: 60,
				countDownTimer: null,
				flag:true
			}
		},
		onLoad(options) {
			if(options.uuid){
				this.uuid=options.uuid;
				this.disabled=true;
			}
		},
		methods: {
			toUserContent() {
				uni.navigateTo({
					url: './register_content'
				})
			},
			toPrivacy() {
				uni.navigateTo({
					url: "./privacy"
				})
			},
			getcode() {
				// var myreg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
				// if (!myreg.test(this.phone)) {
				// 	uni.showToast({
				// 		title: '请输入手机号码',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					})
					return
				}
				if (this.vscode != "获取验证码" && this.vscode != "重新发送") {
					return
				}
				
				this.$http('api/login/sendCode', {
					phone: this.phone,
					type: 1
				}, 'POST').then(data => {
					uni.showToast({
						title: "发送成功",
						icon: 'none'
					})
					this.countNum = 60
					this.countDownTimer = setInterval(() => {
						if (this.countNum < 1) {
							clearInterval(this.countDownTimer)
							this.countDownTimer = null
							this.vscode = "重新发送";
							return;
						}
						this.countNum--;
						this.vscode = this.countNum + '秒重发';
					}, 1000)
				}).catch(() => {
					clearInterval(this.countDownTimer)
					this.countDownTimer = null
					this.vscode = "获取验证码";
				})
			},
			toDown() {

			},
			toRegister() {
				if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					})
					return;
				}
				if (this.password == ''||this.password.length<8) {
					uni.showToast({
						title: "请输入密码且不少于8位",
						icon: 'none'
					})
					return;
				}
				if (this.password_re != this.password) {
					uni.showToast({
						title: "重复密码输入不正确",
						icon: 'none'
					})
					return;
				}
				if (this.code == '') {
					uni.showToast({
						title: "请输入验证码",
						icon: 'none'
					})
					return;
				}
				// if (!this.uuid) return uni.showToast({
				// 	title:'请输入邀请码',
				// 	icon:'none'
				// })
				// if (this.checked == false) {
				// 	uni.showToast({
				// 		title: "请先同意用户协议!",
				// 		icon: 'none'
				// 	})
				// 	return;
				// }
				if (!this.flag) return
				this.flag = false
				// 注册
				this.$http('api/login/register', {
					phone: this.phone,
					password: this.password,
					uuid: this.uuid,
					password_re:this.password_re,
					code:this.code
				}, 'POST').then(res => {
					uni.showToast({
						title: '注册成功'
					})
					uni.setStorageSync("token", res.app_token)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/index'
						})
					}, 500)
				}).catch(()=>{
					this.flag = true
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.logo {
		width: 458rpx;
		height: 80rpx;
		display: block;
		margin: 0 auto;
	}

	.u-checkbox-group {
		width: 100%;

		/deep/ .u-checkbox {
			width: 80% !important;
			margin: 0 auto;
			text-align: center;
			font-size: 20rpx;

		}

		/deep/ .u-checkbox__label {
			color: #999 !important;
		}

		/deep/ .u-checkbox__label {
			margin-right: 0;
		}

		text {
			color: #EFAA1C;
		}
	}

	/deep/ .u-field {
		height: 98rpx;
		color: #3c3c3c;
		background: #fff;
		border-radius: 10rpx;
	}
	
	.getBtn {
		width: 190rpx;
		height: 60rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 60rpx;
		text-align: center;
		background: #666;
		border-radius: 30rpx;
	}
	
	.register-btn {
		height: 98rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		background: linear-gradient(90deg, #EEA634 0%, #DE2D32 100%);
		border-radius: 49rpx;
		&::after {
			border: none;
		}
	}

	.downBtn {
		background: transparent;
		border: 1px solid #EFAA1C;
		color: #EFAA1C;
		height: 92rpx;
		width: 650rpx;
		font-size: 32rpx;
		line-height: 92rpx;
	}
</style>
